<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <sub-menu
          v-for="menu in sideMenuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
        // menu: this.$route.params.menu,
        dynamicMenuRoutes: [],
        sideMenuList: [],
        allSideMenuList: {
          'home': {
            'url': '/home'
          },
          'sys': [
            {
              'menuId': 2,
              'parentId': 1,
              'parentName': null,
              'name': '管理员列表',
              'url': 'sys/user',
              'perms': null,
              'type': 1,
              'icon': 'admin',
              'orderNum': 1,
              'open': null,
              'list': null
            },
            {
              'menuId': 3,
              'parentId': 1,
              'parentName': null,
              'name': '角色管理',
              'url': 'sys/role',
              'perms': null,
              'type': 1,
              'icon': 'role',
              'orderNum': 2,
              'open': null,
              'list': null
            },
            {
              'menuId': 5,
              'parentId': 1,
              'parentName': null,
              'name': 'SQL监控',
              'url': 'http://localhost:8080/renren-fast/druid/sql.html',
              'perms': null,
              'type': 1,
              'icon': 'sql',
              'orderNum': 4,
              'open': null,
              'list': null
            },
            {
              'menuId': 6,
              'parentId': 1,
              'parentName': null,
              'name': '定时任务',
              'url': 'job/schedule',
              'perms': null,
              'type': 1,
              'icon': 'job',
              'orderNum': 5,
              'open': null,
              'list': null
            },
            {
              'menuId': 27,
              'parentId': 1,
              'parentName': null,
              'name': '参数管理',
              'url': 'sys/config',
              'perms': 'sys:config:list,sys:config:info,sys:config:save,sys:config:update,sys:config:delete',
              'type': 1,
              'icon': 'config',
              'orderNum': 6,
              'open': null,
              'list': null
            },
            {
              'menuId': 30,
              'parentId': 1,
              'parentName': null,
              'name': '文件上传',
              'url': 'oss/oss',
              'perms': 'sys:oss:all',
              'type': 1,
              'icon': 'oss',
              'orderNum': 6,
              'open': null,
              'list': null
            },
            {
              'menuId': 29,
              'parentId': 1,
              'parentName': null,
              'name': '系统日志',
              'url': 'sys/log',
              'perms': 'sys:log:list',
              'type': 1,
              'icon': 'log',
              'orderNum': 7,
              'open': null,
              'list': [
                {
                  'menuId': 51,
                  'parentId': 29,
                  'parentName': null,
                  'name': '日志1',
                  'url': 'sys/user',
                  'perms': null,
                  'type': 1,
                  'icon': 'modelmange',
                  'orderNum': 1,
                  'open': null,
                  'list': null
                },
                {
                  'menuId': 52,
                  'parentId': 29,
                  'parentName': null,
                  'name': '日志2',
                  'url': 'sys/user',
                  'perms': null,
                  'type': 1,
                  'icon': 'modelmange',
                  'orderNum': 1,
                  'open': null,
                  'list': []
                }
              ]
            }
          ],
          'flow': [
            {
              'menuId': 101,
              'parentId': 100,
              'parentName': null,
              'name': '流程管理',
              'url': 'sys/user',
              'perms': null,
              'type': 1,
              'icon': 'flowmange',
              'orderNum': 1,
              'open': null,
              'list': null
            },
            {
              'menuId': 110,
              'parentId': 100,
              'parentName': null,
              'name': '模型管理',
              'url': 'sys/user',
              'perms': null,
              'type': 1,
              'icon': 'modelmange',
              'orderNum': 1,
              'open': null,
              'list': [
                {
                  'menuId': 111,
                  'parentId': 110,
                  'parentName': null,
                  'name': '模型管理1',
                  'url': 'sys/user',
                  'perms': null,
                  'type': 1,
                  'icon': 'modelmange',
                  'orderNum': 1,
                  'open': null,
                  'list': null
                },
                {
                  'menuId': 112,
                  'parentId': 110,
                  'parentName': null,
                  'name': '模型管理1',
                  'url': 'sys/user',
                  'perms': null,
                  'type': 1,
                  'icon': 'modelmange',
                  'orderNum': 1,
                  'open': null,
                  'list': []
                }
              ]
            }
          ],
          'list': [
            {
              'menuId': 201,
              'parentId': 200,
              'parentName': null,
              'name': '服务监控',
              'url': 'sys/user',
              'perms': null,
              'type': 1,
              'icon': 'servicemonitor',
              'orderNum': 1,
              'open': null,
              'list': null
            },
            {
              'menuId': 202,
              'parentId': 200,
              'parentName': null,
              'name': '接口文档',
              'url': 'sys/user',
              'perms': null,
              'type': 1,
              'icon': 'document',
              'orderNum': 1,
              'open': null,
              'list': null
            }
          ],
          'mymenu': {
            'url': 'mymenu/index'
          }
        },
        noneMenu: [{
          'name': '没有侧栏菜单',
          'url': null,
          'icon': 'servicemonitor'
        }]
      }
    },
    components: {
      SubMenu
    },
    computed: {
      menuList: {
        get () { return this.$store.state.common.menuList },
        // get () { return [{name: "nan", id: 1204}]},
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      // sideMenuList: {
      //   get () { return this.$store.state.common.sideMenuList },
      //   set (val) { this.$store.commit('common/updateSideMenuList', val) }
      // },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      },
      topMenuName () {
        let rule = /^\/\w+(\/)?/
        let name = rule.exec(this.$route.path)[0]
        if (name.includes('/', 1)) {
          return name.slice(1, -1)
        } else { // home
          return name.slice(1)
        }
      }
    },
    watch: {
      $route: 'routeHandle',
      topMenuName: 'changSideMenuList'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
      this.changSideMenuList()
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || ''
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      },
      changSideMenuList () {
        if (Array.isArray(this.allSideMenuList[this.topMenuName])) {
          this.sideMenuList = this.allSideMenuList[this.topMenuName]
        } else {
          this.sideMenuList = this.noneMenu
        }
      }
    }
  }
</script>
